<template>

	<view>
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">地图展示</block>
		</cu-custom>


	<map :include-points='marker' :enable-zoom='false'	:enable-traffic="true" class="maps" :markers="marker"></map>
	<cover-view class="map-text">
	  <cover-view class="map-title">骑手正在送货</cover-view>
	  <cover-view class="map-time">
	    <cover-view class="cuIcon-timefill text-grey"></cover-view>
	    <cover-view>预计送达</cover-view>
	    <cover-view>2021-2-20 18:00 </cover-view>
	  </cover-view>
	  <cover-view class="map-msg">
	    <cover-view class="map-msg-1">
	      <cover-view class="cu-avatar round lg">头</cover-view>
	      <cover-view>李先拿个蓝骑手</cover-view>
	    </cover-view>
	    <cover-view catchtap="playPhone" class="map-msg-2 cuIcon-dianhua text-balck"></cover-view>
	  </cover-view>
	</cover-view>
	
		</view>
</template>

<script>

	const app = getApp();
	import api from 'utils/api'
	let mapIntergral = null
	export default {
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				marker: [],
				orderid:''
			};
		},
		mounted() {
			// mapIntergral = setInterval(() => {
			//   this.getMap();
			// }, 1000);
			setTimeout(() => {
			  this.getMap();
			}, 1000);
		},
		beforeDestroy() {
			clearInterval(mapIntergral);
		},
		methods:{
			  getMap() {
			    // app.api.queryCarrier(this.data.orderid).then((res) => {
			    //   let data = JSON.parse(res.data)

			    //     mapData: data,
			        this.marker = [{
			          // longitude: data.location.split(',')[0],
			          // latitude:data.location.split(',')[1],
					  longitude:'116.397469',
					  latitude:'39.908821',
			          id: 1,
			          width:'40px',
			          height:'40px',
			          iconPath: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F50%2F46%2F01300000215739122122460533833.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618798172&t=1eef059a284336330b507f793d1123c9'
			        },
			        {
					  longitude:'116.377469',
					  latitude:'39.708821',
			          id: 2,
			          width:'42px',
			          height:'68px',
			          iconPath: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F634%2Fw708h726%2F20180330%2F4337-fyssmmc6809468.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618798899&t=f0ec18906e36523b3fb2c9c4999f1276',
			          callout:{
			            content:'距您'+this.getDistance('39.908821','116.397469','39.708821','116.377469'),
			            // content:'距您一万年',
			            padding:'20rpx',
			            display:'ALWAYS',
			            anchorY:'-66',
			            borderRadius:'100'
			          }
			        },
					]

			    // })
			  },
			    playPhone() {
			      uni.makePhoneCall({//拨打电话
			        phoneNumber: this.data.mapData.carrierPhone
			      })
			    },
			    Rad(d) { 
			      //根据经纬度判断距离
				  console.log('我是rad方法')
			      return d * Math.PI / 180.0;
			    },
			    getDistance(lat1, lng1, lat2, lng2) {
					console.log('我是getDistance方法')
			        // lat1用户的纬度
			        // lng1用户的经度
			        // lat2商家的纬度
			        // lng2商家的经度
			        var radLat1 = this.Rad(lat1);
			        var radLat2 = this.Rad(lat2);
			        var a = radLat1 - radLat2;
			        var b = this.Rad(lng1) - this.Rad(lng2);
			        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
			        s = s * 6378.137;
			        s = Math.round(s * 10000) / 10000;
			        s = s.toFixed(1) + 'km' //保留两位小数
			        return s
			    },
		}

	}
</script>

<style scoped lang="scss">
.maps{
  width: 100vw;
  height: 100vh;
}
.map-text{
  position: fixed;
  bottom:40rpx;
  left: 25rpx;
  width: 700rpx;
  background: rgba(255, 255, 255, .9);
  border-radius: 10rpx;
  height: 300rpx;
}
.map-title{
  text-align: center;
  font-size: 46rpx;
  margin-top: 22rpx;
}
.map-time{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}
.map-time cover-view:nth-child(1){
  font-size: 38rpx;
}
.map-time cover-view:nth-child(2){
  font-size: 30rpx;
  margin: 0 15rpx;
}
.map-time cover-view:nth-child(3){
  font-size: 30rpx;
  color: #0081ff;
}
.map-msg{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  margin-top: 30rpx;
}
.map-msg-1{
  display: flex;
  align-items: center;
}
.map-msg-1 cover-view:nth-child(2){
  font-size: 40rpx;
}
.map-msg-1 cover-view:nth-child(2){
  margin-left: 20rpx;
}
.map-msg-2{
  font-size: 50rpx;
}
</style>
